<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格布局</title>
		<link rel="stylesheet" href="js/bootstrap-3.4.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="js/bootstrap-3.4.1/css/bootstrap-theme.min.css"/>
		
		<script type="text/javascript"src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript"src="./js/bootstrap-3.4.1/css/bootstrap.min.css"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				
				<div class="col-md-2 col-sm-4 col-xs-5 col-lg-3" style="background-color: red;">.col-md-1</div>
				<div class="col-md-6 col-sm-6 col-xs-6 col-lg-5" style="background-color: orange;">.col-md-1</div>
				<div class="col-md-9 col-sm-8 col-xs-8 col-lg-8" style="background-color: yellow;">.col-md-1</div>
			</div>
		</div>
	</body>
</html>